<template>
  <div>
    <el-tabs v-model="activeName" style="margin-bottom:30px" type="card" @tab-click="handleClick">
      <el-tab-pane label="返利基础信息" name="first">
        <base-info :detail-data="detailData" />
      </el-tab-pane>
      <el-tab-pane label="验收面积明细" name="second">
        <CheckArea preview :data="tableData" />
      </el-tab-pane>
      <el-tab-pane label="扣款异常" name="third">
        <abnormal-deduct :id="id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CheckArea from '@/views/check/hard/execute/components/checkArea'
import { getSeriesByAccId } from '@/api/shopRebate'
import abnormalDeduct from '../component/abnormalDeduct.vue'
import baseInfo from '../component/rebateBaseInfo.vue'
export default {
  components: { baseInfo, abnormalDeduct, CheckArea },
  props: {
    id: {
      type: String,
      default: ''
    },
    constCode: {
      type: String,
      default: ''
    },
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableSelected: [],
      activeName: 'first',
      otherFilter: [],
      tableData: [],
      tableConfig2: {
        interfacePath: '',
        setting: [
          {
            prop: 'areaName',
            label: '所属区域',
            minWidth: '110'
          },
          {
            prop: 'programName',
            label: '方案名称',
            minWidth: '120'
          },
          {
            prop: 'actualOutpicArea',
            label: '实际出图面积',
            minWidth: '130'
          },
          {
            prop: 'acceptArea',
            label: '验收面积',
            minWidth: '120'
          },
          {
            prop: 'acceptDesc',
            label: '验收说明',
            minWidth: '120'
          },
          {
            prop: 'seriesName',
            label: '系列名称',
            minWidth: '120'
          },
          {
            prop: 'seriesOutpicArea',
            label: '实际出图面积',
            minWidth: '130'
          }, {
            prop: 'acceptSeriesArea',
            label: '验收面积',
            minWidth: '120'
          },
          {
            prop: 'acceptSeriesDesc',
            label: '验收说明',
            minWidth: '120'
          },
          {
            prop: 'types',
            label: '是否建设范围内验收',
            minWidth: '170',
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'acceptTaskCode',
            width: 200,
            label: '验收任务号'
          }
        ]
      }
    }
  },
  watch: {
    'detailData.hardId': {
      handler(v) {
        if (v) {
          getSeriesByAccId({ hardId: this.detailData.hardId, softId: this.detailData.softId }).then(res => {
            if (res.success === 1) {
              const types0 = this.handlerDataArea(res.data.filter(e => e.types == 0))
              // eslint-disable-next-line eqeqeq
              const types1 = this.handlerDataArea(res.data.filter(e => e.types == 1))
              this.tableData = [...types1, ...types0]
            //  this.tableData = this.handlerData(res.data || [])
            }
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handleClick(tab, event) {

    },
    // 处理区域数据
    handlerDataArea(data) {
      const t = {}
      data.forEach(e => {
        const key = e.configAreaId
        if (!t[key]) {
          t[key] = []
        }
        t[key].push(e)
      })

      // 按照方案合并
      const result = []
      for (const [k, v] of Object.entries(t)) {
        const programs = {}
        for (let i = 0; i < v.length; i++) {
          const item = v[i]
          if (i === 0) {
            item.areaSpanRow = v.length
            item.areaSpanColumn = 1
          } else {
            item.areaSpanRow = 0
            item.areaSpanColumn = 0
          }
          const key = item.programId || item.programName
          if (programs[key] === undefined) {
            programs[key] = []
          }
          programs[key].push(item)
        }
        // 按照方案合并
        // eslint-disable-next-line no-unused-vars
        for (const [k, v] of Object.entries(programs)) {
          v.forEach((e, i) => {
            if (i === 0) {
              e.programSpanRow = v.length
              e.programSpanColumn = 1
            } else {
              e.programSpanRow = 0
              e.programSpanColumn = 0
            }
            e.group = v
            result.push(e)
          })
        }
      }
      return result

      // const rows = []
      // for (const item of Object.values(t)) {
      //   const len = item.length
      //   for (let i = 0; i < item.length; i++) {
      //     const row = item[i]
      //     row.spanRow = 0
      //     if (i === 0) {
      //       row.spanRow = len
      //     }
      //     rows.push(row)
      //   }
      // }
      // return rows
    },
    btnOperate(flag) {
      switch (flag) {
        case 'export':
          this.handleExport()
          break

        default:
          break
      }
    },
    handleExport() {}

  }
}
</script>
